<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        .dark-carousel-control {
            background-color: #000000; /* 将背景颜色更改为您想要的深色值 */
        }

        .dark-carousel-control:hover {
            background-color: #333; /* 当鼠标悬停在按钮上时的颜色 */
        }

        .dark-carousel-control:focus {
            background-color: #555; /* 当按钮获得焦点时的颜色 */
        }

        .contact-list-item {
            cursor: pointer;
        }

        .container-fluid {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #carouselExampleIndicators {
            max-width: 600px; /* 设置最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .carousel-inner {
            max-height: 300px; /* 设置最大高度 */
        }

        .carousel-item img {
            object-fit: contain; /* 图片适应容器大小，保持比例 */
            max-height: 100%; /* 图片最大高度为容器高度 */
            max-width: 100%; /* 图片最大宽度为容器宽度 */
        }

    </style>


</head>
<body>

<div th:fragment="top">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/index">通讯录管理系统</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/addressBook">我的联系人</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/recycleBin">回收站</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="userWelcome" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false"></a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                        <a class="dropdown-item" href="/logout">退出登录</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>

<div class="container">

        <h5>外部联系人列表</h5>

        <!-- 搜索框 -->
        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索...">
                        <div class="input-group-append">
                            <button id="searchBtn" class="btn btn-primary" type="button">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid form-inline">

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" onclick="filterContacts()">全部</button>
        </div><br>

        <div class="table container-fluid">
            <table>
                <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody id="contactList">

                </tbody>
            </table>
        </div><br>

        <div class="pagination">
            <a href="#" class="first-page">首页</a>
            <a href="#" class="prev-page">上一页</a>
            <span class="page-numbers"></span>
            <a href="#" class="next-page">下一页</a>
            <a href="#" class="last-page">尾页</a>
            <input type="text" class="jump-to-page" placeholder="请输入跳转页码">
            <button class="go-to-page">跳转</button>
        </div>
    </div>

    <!-- 图片栏 -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="../img/zhaozu1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="../img/zhaozu2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="../img/zhaozu3.jpg" alt="Third slide">
            </div>
        </div>
        <a class="dark-carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="dark-carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>

<script>

    var usernameB;
    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const username = urlParams.get('username');
    if(username!=null){
        usernameB = localStorage.setItem("usernameB",username);
    }


    var currentPage = 1;
    var totalPages = 0;
    var url = "";

    // 页面加载完成后初始化联系人列表
    $(document).ready(function() {

        if (username!=null){
            localStorage.setItem("welcome",username);
            $('#userWelcome').append("<p>"+"欢迎，"+username+"</p>");
        }else {
            $('#userWelcome').append("<p>"+"欢迎，"+localStorage.getItem('usernameB')+"</p>");
        }
        url = '/allUserInfo/byPage';
        getAllUserInfo(1,10);
    });

    // 获取外部联系人数据
    function getAllUserInfo(pageNum,pageSize) {

        $.ajax({
            url: url,
            type: 'GET',
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (data) {
                // 用新数据更新表
                // 更新分页组件
                currentPage = data.pageNum;
                totalPages = data.pages;
                updatePagination();
                updateTableItems(data);
            },
            error: function (xhr, status, error) {
                console.log('Error: ' + error);
            }
        });
    }

    // 渲染外部联系人列表
    function updateTableItems(data) {
        var tableBody = $("#contactList");
        tableBody.empty();

        data.list.forEach((allUserInfo) =>{
            var row = $("<tr></tr>");
            row.append("<td><input type='checkbox' class='contact-checkbox' value='" + allUserInfo.id + "'></td>");
            row.append("<td>" + allUserInfo.id + "</td>");
            row.append("<td class='contact-list-item' onclick='viewContactDetails(" + allUserInfo.id + ")'>" + allUserInfo.name + "</td>");
            row.append("<td>" + allUserInfo.phoneNumber + "</td>");
            row.append("<td>" + allUserInfo.label + "</td>");
            tableBody.append(row);
        });
    }

    // 渲染分页控件
    function updatePagination() {
        var pageNumbers = '';
        for (var i = 1; i <= totalPages; i++) {
            if (i == currentPage) {
                pageNumbers += '<span class="current-page">' + i + ' </span>';
            } else {
                pageNumbers += '<a href="#" class="page-number">' + i + '</a>';
            }
        }
        $('.pagination .page-numbers').html(pageNumbers);
    }

    // 处理分页按钮单机事件
    $('.pagination .first-page').click(function (e) {
        e.preventDefault();
        getAllUserInfo(1, 10);
    });
    $('.pagination .prev-page').click(function (e) {
        e.preventDefault();
        if (currentPage > 1) {
            getAllUserInfo(currentPage - 1, 10);
        }
    });
    $('.pagination').on('click', '.page-number', function(e) {
        e.preventDefault();
        var pageNum = $(this).text();
        getAllUserInfo(pageNum, 10);
    });

    $('.pagination .next-page').click(function (e) {
        e.preventDefault();
        if (currentPage < totalPages) {
            getAllUserInfo(currentPage + 1, 10);
        }
    });
    $('.pagination .last-page').click(function (e) {
        e.preventDefault();
        getAllUserInfo(totalPages, 10);
    });
    // 处理跳转到页面的输入
    $('.pagination .go-to-page').click(function (e) {
        e.preventDefault();
        var pageNum = parseInt($('.pagination .jump-to-page').val());
        if (pageNum >= 1 && pageNum <= totalPages) {
            getAllUserInfo(pageNum, 10);
        }
    });

    // 根据标签过滤联系人
    function filterContacts() {
        // 进行分类筛选的函数
        url = '/allUserInfo/byPage';
        getAllUserInfo(1,10);
    }

    // 模糊查询
    $("#searchBtn").click(
        function () {
            var condition = $("#searchInput").val();
            url = '/allUserInfo/fuzzyQuery/' + condition;
            getAllUserInfo(1,10);
        }
    )

    // 查看外部联系人详情
    function viewContactDetails(id) {
        // 根据id跳转至联系人详情页面
        window.location.href = "outerContactDetails?id=" + id;
        console.log("查看联系人详情，ID：" + id);
    }

</script>

</body>
</html>